<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始JSX</title>
</head>
<body>
<div id="root"></div>
</body>
<!-- 引入react核心库 -->
<script src="./js/react.development.js"></script>
<!-- 引入react-dom库 -->
<script src="./js/react-dom.development.js"></script>
<!-- 引入babel库，用于解析jsx语法 -->
<script src="./js/babel.js"></script>


<!-- 注意：script标签需要设置type="text/babel",表示里面定义的是jsx语法 -->
<script type="text/babel">

    // jsx：javascript and xml , 可以简单的理解成js和html代码可以混写

    const fn = function(){
        alert("哈哈！我被点击了")
    }
    const num1 = 100;
    const num2 = 200;
    const h2 = <h2 onClick={fn}>{`${ num1 } + ${ num2 } = ${ num1 + num2 }`}</h2>
    // 创建一个React容器
    const root = ReactDOM.createRoot(document.querySelector('#root'))
    // 挂载页面
    root.render(h2)

</script>


</html>
